﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>商品列表—易购触屏版</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./mui/css/mui.css">
    <link rel="stylesheet" href="./mui/css/icons-extra.css">
    <link rel="stylesheet" href="./mui/css/mui.min.css">
</head>

<body>
    <div id="app">
        <!-- 公用头部导航 -->
        <nav class="nav">
            <a class="goback" href="javascript:history.back(1)">
                <span class="mui-icon mui-icon-undo"></span>
            </a>
            <div class="nav-title">商品详情</div>
        </nav>
        <!-- 页面主体 -->
        <section class="layout" id="mylayout">
            
        </section>
        <!-- 公用尾部 -->
        <footer class="footer">
            <a href="#">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a href="#">
                <span class="mui-icon mui-icon-personadd"></span>
                <span class="mui-tab-label">分类</span>
            </a>
            <a href="#">
                <span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
                <span class="mui-tab-label">购物车</span>
            </a>
            <a href="#">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">我的</span>
            </a>
        </footer>
    </div>
</body>

</html>
<script src="./js/axios.min.js"></script>
<script>
    // axios({
    //     method: 'post',
    //     url: 'http://localhost:8090/h2/goods/getGoods',
    //     data:{
    //         "id":1
    //     }
    // }).then(res => {
    //     console.log(res.data);
    // })
    axios.post('http://localhost:8090/h2/goods/getGoods',{"id":1})
    .then(res=>{console.log(res.data);
        if(res.data.success){
            const mylayout=document.querySelector('#mylayout')
            mylayout.innerHTML+=`
            <div class="detail_img">
                <img src="${res.data.goods.imagePath}" alt="">
            </div>
            <table class="detail_table">
                <tr>
                    <td style="width: 20%">商品编号</td>
                    <td>${res.data.goods.id}</td>
                </tr>
                <tr>
                    <td style="width: 20%">商品标题</td>
                    <td>${res.data.goods.title}</td>
                </tr>
                <tr>
                    <td style="width: 20%">商品详情</td>
                    <td>${res.data.goods.content}</td>
                </tr>
                <tr>
                    <td style="width: 20%">商品价格</td>
                    <td>${res.data.goods.price}</td>
                </tr>
                <tr>
                    <td colspan="2" class="btn">
                        <span class="detail_order">加入购物车</span>
                        <span class="detail_buy">立即购买</span>
                    </td>
                </tr>
            </table>
            `
        }
    })
</script>